<template>
  <div class="overall-icon-popover">
    <header class="header">

      <el-input placeholder="搜索图标/name"></el-input>

    </header>
    <main class="main">
      <ul class="icon-ul">
        <li
          class="icon-ul-li"
          v-for="(i, index) in handleIconFontList"
          :key="index"
          @click="clickIcon(index)"
        >
          <i class="overall-icon " :title="i.name" :class="i.className"></i>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import iconfontJson from "../../../../iconfont/iconfont.json";
export default {

  computed: {
    handleIconFontList() {
      return this.iconFontList.map(item => {
        item.className =this.css_prefix_text + item.font_class
        return item
      })
    }
  },
  methods: {
    clickIcon(index) {
      this.$emit("click", this.handleIconFontList[index]);
    },
    getIconFontData() {
      this.css_prefix_text = iconfontJson.css_prefix_text
      this.iconFontList = iconfontJson.glyphs;
    },
  },
  data() {
    return {
      css_prefix_text:"",
      iconFontList: [],
    };
  },
  created() {
    this.getIconFontData();
  },
};
</script>

<style lang="scss" scoped>
.overall-icon-popover {
  height: 400px;
  overflow-y: overlay;
}

.header{
  position: sticky;
  top: 0;
  left: 0;
  padding-bottom: 10px;
  background: white;
}

.icon-ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.icon-ul-li {
  width: 50px;
  height: 50px;
  line-height: 51px;
  text-align: center;
  font-size: 24px;
  margin-right: 15px;
  border: 2px dashed #c3c3c3;
  margin-bottom: 15px;
}
.icon-ul-li:hover {
  border-color: #66a6f7;
}
.icon-ul-li:nth-child(6n) {
  margin-right: 0px;
}
</style>
